<%--
  Created by IntelliJ IDEA.
  User: 喝假酒的ywj
  Date: 2020/3/6
  Time: 22:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>头部</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/index.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/header.css">
    <script src="${pageContext.request.contextPath}/js/nprogress.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/nprogress.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/swiper.min.css" />
    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=6g844IbkMBTqkBHr2jKnVfKIfxcGXOcj"></script>
    <script src="${pageContext.request.contextPath}/js/jquery.cookie.js"></script>
    <script src="${pageContext.request.contextPath}/js/template-web.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery-url.min.js"></script>
    <script src="${pageContext.request.contextPath}/layer/layer.js"></script>
    <script>
        $(function () {
            $.getJSON("http://api.map.baidu.com/location/ip?ak=6g844IbkMBTqkBHr2jKnVfKIfxcGXOcj&ip="+returnCitySN["cip"]+"&coor=bd09ll&callback=?", function (data) {
                let cityName = data.content.address_detail.city;
                let city = localStorage.getItem("cityName")||'';
                $('#city').text(cityName);
                let html;
                let cityId;
                if(city==''||city===undefined){
                    html = cityName+'<span class="caret caret-city"></span>',
                    cityId = cityName;
                }else{
                    html = city+'<span class="caret caret-city"></span>';
                    cityId = city;
                }
                $('#dropdownMenu2').html(html);
                NProgress.start();
                $.ajax({
                    url:'${pageContext.request.contextPath}/front/cinema/getIdByCityName',
                    dataType: "json",
                    data:{name:cityId},
                    async:true,
                    success:function (data) {
                        NProgress.done();
                        localStorage.setItem("city",data.data.city_id);
                    }
                })
            });
            NProgress.start();
            $.ajax({
                url:'${pageContext.request.contextPath}/front/cinema/getAllCity',
                dataType: "json",
                async:true,
                success:function (data) {
                    NProgress.done();
                    var html = template('temp',{list:data.data});
                    $('#city-box').html(html);
                    //获取选择的城市
                    $('.js-city-name').click(function () {
                        let city = $(this).html();
                        let id = $(this).data('id');
                        localStorage.setItem("city",id);
                        localStorage.setItem("cityName",city);
                        $('#city').text(city)
                        let html = city+'<span class="caret caret-city"></span>'
                        $('#dropdownMenu2').html(html);
                        window.location.href='${pageContext.request.contextPath}/front/cinema/cinema?cityId='+id;
                    });
                }
            })
            let urlArr = window.location.href.split('?');
            let query = urlArr[0];
            console.log(query);
            if(query==='http://localhost:8801/cinema-front/front/index/home'||query==='http://127.0.0.1:8801/cinema-front/front/index/home'){
                $('#index').find('a').addClass('active');
            }
            if(query==='http://localhost:8801/cinema-front/front/movie/movie'||query==='http://127.0.0.1:8801/cinema-front/front/movie/movie'){
                $('#movie').find('a').addClass('active');
            }
            if(query==='http://localhost:8801/cinema-front/front/cinema/cinema'||query==='http://127.0.0.1:8801/cinema-front/front/cinema/cinema'){
                $('#cinema').find('a').addClass('active')
            }
            $('#index').click(function () {
                $(this).parent().find('a').removeClass('active');
                $(this).find('a').addClass('active').attr('href','${pageContext.request.contextPath}/front/index/home')
            });
            $('#movie').click(function () {
                $(this).parent().find('a').removeClass('active');
                $(this).find('a').addClass('active').attr('href','${pageContext.request.contextPath}/front/movie/movie?tab=0')
            });$('#cinema').click(function () {
                $(this).parent().find('a').removeClass('active');
                let city = localStorage.getItem("city")||'';
                $(this).find('a').addClass('active').attr('href','${pageContext.request.contextPath}/front/cinema/cinema?cityId='+city);
            });
            $('#search-btn').click(function () {
                if($('#search').val()===''){
                    layer.msg("请输入关键词");
                }else{
                    window.location.href="${pageContext.request.contextPath}/front/movie/search?kw="+$('#search').val();
                }
            });
            //
            //登录发 ajax请求
            let userId = $.cookie("userId");
            if(userId === undefined || userId=='null'){
                $('#loginAndExit').text('登录');
                $('#my').text("我的");
                $('#loginAndExit').click(function () {
                    window.location.href='${pageContext.request.contextPath}/front/index/login'
                });
                $('#my').click(function () {
                    window.location.href='${pageContext.request.contextPath}/front/index/login'
                });
                //console.log(1)
            }else{
                NProgress.start();
                $.ajax({
                    url:'${pageContext.request.contextPath}/front/user/getUserInfo',
                    dataType: "json",
                    async:true,
                    success:function (data) {
                        //console.log(data)
                        NProgress.done();
                        $('#my').text(data.data.nickname).attr("href","${pageContext.request.contextPath}/front/index/order");
                        $('#loginAndExit').text("退出");
                        $('#loginAndExit').click(function () {
                            $.cookie('userId',null,{ path: '/' });
                            window.location.href = '${pageContext.request.contextPath}/front/index/login'
                        });
                        $('#dropdownMenu1').css('background',"url("+data.data.avatar+")").css('background-size','contain');
                    }
                })
            }
        })
    </script>
</head>
<body>
<header>
    <nav class="navbar navbar-default header navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="#"
                ><img src="${pageContext.request.contextPath}/images/IMG_20191223_163010.png" class="logo"
                /></a>
            </div>
            <div
                    class="collapse navbar-collapse"
                    id="bs-example-navbar-collapse-1"
            >
                <ul class="nav navbar-nav">
                    <li id="index">
                        <a href="#">首页 </a>
                    </li>
                    <li id="movie"><a href="#">电影</a></li>
                    <li id="cinema"><a href="#">影院</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <form class="navbar-form navbar-left" role="search">
                            <div class="form-group">
                                <input
                                        type="text"
                                        class="form-control search"
                                        placeholder="搜索"
                                        id="search"
                                />
                                <span class="search-icon" id="search-btn"
                                ><span class="glyphicon glyphicon-search"></span
                                ></span>
                            </div>
                        </form>
                    </li>
                    <li class="dropdown">
                        <div
                                class="dropdown-toggle no-avatar"
                                type="button"
                                id="dropdownMenu1"
                                data-toggle="dropdown"
                                aria-haspopup="true"
                                aria-expanded="true"
                        ></div>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" style="z-index: 999">
                            <li><a href="javascript:void(0);" id="my">我的</a></li>
                            <li><a href="javascript:void(0);" id="loginAndExit">登陆</a></li>
                        </ul>
                    </li>
                    <li>
                        <div class="dropdown area">
                            <div
                                    class="dropdown-toggle city"
                                    type="button"
                                    id="dropdownMenu2"
                                    data-toggle="dropdown"
                                    aria-haspopup="true"
                                    aria-expanded="true"
                                    style="width: 60px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;cursor: pointer"
                            >
                                南京<span class="caret caret-city"></span>
                            </div>
                            <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
                                <div class="city-container">
                                    <%--<div class="now-city">--%>
                                        <%--<span class="city-header" style="cursor: pointer">当前城市：<span id="city" ></span></span>--%>
                                    <%--</div>--%>
                                    <ul>
                                        <li>
                                            <div id="city-box">

                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>
<script id="temp" type="text/html">
    {{each list item index}}
    <a class="js-city-name" data-id="{{item.city_id}}">{{item.city_name}}</a>
    {{/each}}
</script>
</body>
</html>
